import React, {memo} from 'react';
import { connect } from "react-redux";
import {addNumberAction, subNumberAction} from "./store/modules/counter";

/**
 * 为了让组件和redux结合起来，我们使用了react-redux中的connect
 * 但是这种方式必须使用高阶组件结合返回的高阶组件
 * 并且必须编写 mapStateToProps 和 mapDispatchToProps 映射的函数
 */
const App = memo((props) => {
  const { counter, addNumber, subNumber } = props
  return (
      <div>
        <h2>当前技术: {counter}</h2>
        <button onClick={() => addNumber(1)}>+1</button>
        <button onClick={() => subNumber(1)}>-1</button>
      </div>
  );
});

const mapStateToProps = (state) => ({
  counter: state.counter.count
})
const mapDispatchToProps = (dispatch) => ({
  addNumber(num) {
    dispatch(addNumberAction(num))
  },
  subNumber(num) {
    dispatch(subNumberAction(num));
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(App);